<script setup>
import TopButtonCenter from "@/components/Pengyq/TopButtonCenter.vue";
import { onMounted, ref } from "vue";
import { getCollectListAPI } from "@/server/api/ItemCommodity";
import { getCollectShopAPI } from "@/server/api/ShopFollow";
import { useUseStore } from "@/stores/user";
import { ItemShopStore } from "@/stores/ItemAnShop";
import { dataNitkTow, dataNitkThree } from "@/hook/dataNltk";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const router = useRouter();
const ItemShop = ItemShopStore();
const useStore = useUseStore();
const CollectList = ref([]);
const page = ref(1);
const size = ref(9)
const loading = ref(false);
const finished = ref(false);

// 获取item收藏列表
const getCollectList = async (page, limit, id) => {
  const res = await getCollectListAPI(page, limit, id);
  let data = res.data.data;
  data.list.forEach((item) => {
    item.sellerPic = item.userImage;
  });
  CollectList.value.push(...data.list);
  if (data.list.length < size.value) {
    finished.value = true;
  }
  loading.value = false;
  console.log("收藏数据", CollectList.value);
};

// 获取shop收藏列表
const getCollectShop = async (page, limit, id) => {
  const res = await getCollectShopAPI(page, limit, id);
  if (res.data.code === 200) {
    let data = res.data.data;
    data.list.forEach((item) => {
      item.avatarImg = item.avatarImag
    });

    CollectList.value.push(...data.list);
    if (data.list.length < size.value) {
      finished.value = true;
    }
    loading.value = false;
  }
};



// 跳转商品详情页
const goProductsDetail = (commodityId) => {
  console.log(commodityId);
  router.push({
    path: "/details",
    query: {
      id: commodityId,
    },
  });
};
// 跳转实体店商品详情页
const goProductsShopDetail = (id) => {
  console.log(id);
  router.push({
    path: "/ScheduledDetail",
    query: {
      id: id,
    },
  });
};

const onLoad = () => {

  // 异步更新数据
  if (ItemShop.IdtStatus == "item") {
    getCollectList(++page.value, size.value, useStore.userId);
  } else {
    getCollectShop(++page.value, size.value, useStore.userId);
  }
};

onMounted(() => {
  CollectList.value = [];
  page.value = 1;
  finished.value = false;
  if (ItemShop.IdtStatus == "item") {
    getCollectList(page.value, size.value, useStore.userId);
  } else {
    getCollectShop(page.value, size.value, useStore.userId);
  }
});
</script>
<template>
  <top-button-center :title="$t('me.buyersCenter.collection')" />

  <div class="Collection">
    <ul class="list">
      <van-list @load="onLoad" :finished="finished" :immediate-check="false" v-model:loading="loading"
        :finished-text="$t('shop.shopList.finish')">
        <li class="box_show" v-for="(item, index) in CollectList" :key="item.commodityId">
          <div class="list_hd">
            <div class="login">
              <img v-lazy="item.sellerPic || item.userImage" alt="" />
              {{ item.itemName || item.shopName }}
            </div>
          </div>

          <div class="list_ad">
            <div class="imgs">
              <img :src="item.avatarImg" alt="" />
            </div>
            <div class="title ellipsis-2">
              {{ item.itemCommodityName || item.shopCommodityName }}
            </div>
            <div class="introduce">
              <div class="price"><i>eCNY</i>{{ item.price }}</div>
              <div class="bottom_button">
                <div class="btn" @click="
                  ItemShop.IdtStatus == 'item'
                    ? goProductsDetail(item.commodityId)
                    : goProductsShopDetail(item.commodityId)
                  ">
                  {{ $t("me.collection.enter") }}
                </div>
              </div>
            </div>
          </div>
        </li>
      </van-list>
    </ul>
  </div>
</template>

<style lang="scss" scoped>
.Collection {
  font-size: 14rem;
  height: 100vh;
  background-color: #f5f5f5;
  box-sizing: border-box;
  width: 100%;

  padding-top: 60rem;

  .list {
    padding-top: 5rem;
    background-color: #f5f5f5;

    li {
      padding: 0 10rem 10rem 10rem;
      margin-top: 10rem;
      background-color: #fff;

      .list_hd {
        display: flex;
        justify-content: space-between;
        height: 20rem;
        padding: 10rem 0;

        .login {
          color: #000000;
          font-weight: 500;
          font-size: 16rem;

          img {
            width: 24rem;
            height: 24rem;
            vertical-align: middle;
            border-radius: 50%;
            overflow: hidden;
          }
        }

        .text_right {
          color: #642e8e;
          font-size: 16rem;
        }
      }

      .list_ad {
        display: flex;
        justify-content: space-between;
        margin-top: 5rem;

        .imgs {
          width: 20%;
          border-radius: 10rem;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .title {
          margin: 0 20rem;
          width: 120rem;
          height: 58rem;
          font-size: 14rem;
          line-height: 26rem;
        }

        .introduce {
          display: flex;
          flex-direction: column;
          align-items: flex-end;

          .price {
            margin: 0 5rem 20rem;
            font-size: 16rem;
            font-weight: 600;
            color: rgb(0, 0, 0);

            >i {
              color: #000000;
              font-size: 12rem;
            }
          }

          .bottom_button {
            display: flex;

            .btn {
              font-size: 12rem;
              width: 120rem;
              height: 30rem;
              line-height: 30rem;
              text-align: center;
              border-radius: 20rem;
              background-color: #642e8e;
              color: #fff;
            }
          }
        }
      }
    }
  }
}
</style>
